<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .box {
            margin: 50px auto;
            border-top: 1px solid transparent;
            width: 300px;
            height: 400px;
            /* background-color: rgb(220, 205, 205); */
            border: 1px solid gray;
            text-align: center;
            border-radius: 10px;
            background: url(./img/4.gif);
        }

        .box .zhuce {
            font-weight: 700;
            margin-top: 50px;
        }

        .box div:nth-child(2) {
            margin-top: 50px;
            /* margin-bottom: 20px; */
        }

        .box input {
            /* background-color: #f7f7f7; */
            width: 180px;
            height: 30px;
            outline: none;
            border: 1px solid gray;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 12px;

        }

        .box a {
            margin-top: 10px;
            margin-left: 80px;
            font-size: 12px;
            display: block;
            text-decoration: none;
            color: blue;
        }

        .box .btn,a {
            background-color: #5c7dfe;
            width: 180px;
            height: 30px;
            /* margin-top: 20px; */
            border: 0;
            border-radius: 5px;
            cursor: pointer;
            color: white;
        }
        .box a{
            margin: 0 auto;
            color: white;
            list-style: none;
            line-height: 30px;
        }
      
    </style>
</head>

<body>
    <div class="box">
        <div class="zhuce">注册新账号</div>
        <div> <input type="text" placeholder="请输入账号"></div>
        <div> <input type="password" placeholder="请输入密码" ></div>
        <div> <input type="password" placeholder="确认密码"></div>
        <div><input class="btn" type="button" value="注册"></div>
        <div><a href="./登录页promise封装.html">返回登录</a></div>
        
    </div>
</body>

</html>
<script src="./04-ajax.js"></script>
<script>
     //获取所有的input标签
     var inputs = document.querySelectorAll('input')
     //给密码输入框绑定点击显示隐藏效果
    inputs[1].onclick=function(){
        if(inputs[1].type=='password'){
            inputs[1].type='text'
        }
        else{(inputs[1].type=='text')
            inputs[1].type='password'
        }
    }
    //给确认密码输入框绑定点击显示隐藏效果
    inputs[2].onclick=function(){
        if(inputs[2].type=='password'){
            inputs[2].type='text'
        }
        else{(inputs[2].type=='text')
            inputs[2].type='password'
        }
    }
   
    console.log(inputs)
    //给注册按钮绑定点击事件
    inputs[3].onclick = function () {
        //判断输入框输入为空
        if (inputs[0].value && inputs[1].value && inputs[2].value) {
            //满足条件后，判断用户名是否符合格式要求
            if (/[0-9a-zA-Z]{4,8}/.test(inputs[0])) {
                //满足条件后再验证两次密码是否输入一致
                if (inputs[1].value == inputs[2].value) {
                    // 两次密码输入一致，再发起请求
                    ajax('get', 'https://yantianfeng.com/api/register', {
                        username: inputs[0].value,
                        password: inputs[1].value
                    }).then((data) => {
                        if (confirm(data.msg)) {
                            //注册页完成弹出框如果点确定（true）就直接跳转登录页
                            window.location.href = "./登录页promise封装.html"
                        }

                    })

                } else {
                    alert('密码不一致！')
                }
            }
            else {
                alert('请输入正确用户名')
            }


        } else {
            alert('账号或密码输入为空，还请重新输入！')
        }
    }
</script>